
<div class="tools_element">
    <span class="te_title">Upload your own Artwork</span>

    <div class="te_own_images_box">
	
	<div class="te_own_image_box">
	    <div class="te_own_image" id="teo_image1" onclick="imageClicked('teo_image1', 'teo_upload_trigger1');"><br/><span>No Picture</span></div>
	    <span class="te_own_upload" id="teo_upload_trigger1"
		  onclick="refreshUpload('teo_image1', 'teo_upload_trigger1');">UPLOAD</span>
	</div>
	<div class="te_own_image_box">
	    <div class="te_own_image" id="teo_image2" onclick="imageClicked('teo_image2', 'teo_upload_trigger2');"><br/><span>No Picture</span></div>
	    <span class="te_own_upload" id="teo_upload_trigger2"
		  onclick="refreshUpload('teo_image2', 'teo_upload_trigger2');">UPLOAD</span>
	</div>
	<div class="te_own_image_box">
	    <div class="te_own_image" id="teo_image3" onclick="imageClicked('teo_image3', 'teo_upload_trigger3');"><br/><span>No Picture</span></div>
	    <span class="te_own_upload" id="teo_upload_trigger3"
		  onclick="refreshUpload('teo_image3', 'teo_upload_trigger3');">UPLOAD</span>
	</div>
	<div class="te_own_image_box">
	    <div class="te_own_image" id="teo_image4" onclick="imageClicked('teo_image4', 'teo_upload_trigger4');"><br/><span>No Picture</span></div>
	    <span class="te_own_upload" id="teo_upload_trigger4"
		  onclick="refreshUpload('teo_image4', 'teo_upload_trigger4');">UPLOAD</span>
	</div>
    </div>
    <div style="clear:both;"></div>
</div>

<div class="tools_element">
    <span class="te_title">Upload photos from you favorite photo sharing sites</span>
    <span id="te_facebook"></span>
</div>

<div class="tools_element">
    <div id="te_caption_editor">
	<span class="te_title">Add text</span>
	<div class="te_editor">
	    <div class="te_font_caption">font</div>
	    <select id="te_title_font_family">
		{foreach $fontNames as $font}
		<option value="{$font}">{$font}</option>
		{/foreach}
	    </select>
	    <!--	    <div class="te_button" id="teb_left_align"></div>
	    <div class="te_button" id="teb_center_align"></div>
	    <div class="te_button" id="teb_right_align"></div>-->
	    <div class="te_button" id="teb_bold"></div>
	    <div class="te_button" id="teb_italic"></div>
	    <input type="text" id="teb_font_size" value="12" readonly/>
	    <div id="teb_up_down"><div id="teb_up"></div><div id="teb_down"></div></div>
	    <div id="teb_caption_color">
		<div id="customWidget">
		    <div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
		    <div id="colorpickerHolder2">
		    </div>
		</div>
	    </div>
	</div>
	<span style="clear: both;"></span>
	<input id="te_caption" type="text" value="Type your text here"/><span id="te_caption_submit">Insert text</span>
	<span style="clear: both;"></span>
    </div>
</div>

<div class="tools_element">
    <center>
	<span class="te_title">Choose background color</span>
	<input type="text" id="backgroundColor" value="#000000" />
	<div id="colorpicker"></div>
    </center>

    <!--    <div id="Alpha"></div>-->
</div>



{literal}
<script type="text/javascript">

    var imageTriggerId = '';
    var uploadTriggerId = '';

    function imageClicked(pictureBoxId, uploadButtonId){
	var url = $('#'+pictureBoxId).attr('imageUrl');
	    
	if($('#'+pictureBoxId).html() == ''){
	    $('#teo_upload_trigger_step3').click();
	    //alert('tools.tpl => url to upload : ' + url);
	    //setCurrentShopArtworkId(value);
	    loadAdapter();
	}
    }

    function refreshUpload(pictureBoxId, uploadButtonId){

	$('#teo_owner_radio').attr('checked', false);
	$('#teo_message_checkbox').attr('checked', false);
	$('#teo_owner').css('color', '#000');

	$('#teo_upload_trigger_step2').data('tooltip').hide();
	$('#teo_upload_trigger').data('tooltip').hide();

	imageTriggerId = pictureBoxId;
	uploadTriggerId = uploadButtonId;
	    
	if($('#'+uploadTriggerId).html() == 'DELETE'){
	    
	    $('#'+uploadTriggerId).html('UPLOAD');
	    $('#'+uploadTriggerId).css('background-color','#7A8896');

	    $('#'+imageTriggerId).removeAttr('imageUrl');
	    $('#'+imageTriggerId).html('<br/><span>No Picture</span>');
	    $('#'+imageTriggerId).css('background-image', 'none').css('cursor', 'default');
	}else{
	    if(getCookie("skinshop_own_artwork_message")=='true'){
		$('#teo_upload_trigger_step2').click();
	    }else{
		$('#teo_upload_trigger').click();
	    }
	}
    }



    $(document).ready(function(){

	

	//http://acko.net/dev/farbtastic
	$('#colorpicker').farbtastic('#backgroundColor');

	//http://www.eyecon.ro/colorpicker/#about
	$('#colorpickerHolder2').ColorPicker({
		flat: true,
		color: '#00ff00',
		onSubmit: function(hsb, hex, rgb) {
			$('#colorSelector2 div').css('backgroundColor', '#' + hex);
		}
	});
	$('#colorpickerHolder2>div').css('position', 'absolute');
	var widt = false;
	$('#colorSelector2').bind('click', function() {
		$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
		widt = !widt;
	});

	//http://www.digitalmagicpro.com/jPicker/
//	$('#Alpha').jPicker({
//	    window:{
//		expandable: true,
//		position:{
//		    x: '680px', // acceptable values "left", "center", "right", "screenCenter", or relative px value
//		    y: '300px' // acceptable values "top", "bottom", "center", or relative px value
//		}
//	    },
//	    color:{
//		alphaSupport: true,
//		active: new $.jPicker.Color({ ahex: '99330099' })
//	    }
//	});


	/*caption editor - scripts*/
//	$('#teb_left_align').click(function(){
//	    $('#teb_left_align').toggleClass('teb_left_align_active');
//	    $('#teb_center_align').removeClass('teb_center_align_active');
//	    $('#teb_right_align').removeClass('teb_right_align_active');
//	    $('#te_caption').css('text-align','left');
//	});
//	$('#teb_center_align').click(function(){
//	    $('#teb_center_align').toggleClass('teb_center_align_active');
//	    $('#teb_left_align').removeClass('teb_left_align_active');
//	    $('#teb_right_align').removeClass('teb_right_align_active');
//	    $('#te_caption').css('text-align','center');
//	});
//	$('#teb_right_align').click(function(){
//	    $('#teb_right_align').toggleClass('teb_right_align_active');
//	    $('#teb_center_align').removeClass('teb_center_align_active');
//	    $('#teb_left_align').removeClass('teb_left_align_active');
//	    $('#te_caption').css('text-align','right');
//	});
    
	$('#teb_bold').click(function(){
	    $('#teb_bold').toggleClass('teb_bold_active');
	    if($('#teb_bold').hasClass('teb_bold_active')){
		$('#te_caption').css('font-weight','bold');
	    }else{
		$('#te_caption').css('font-weight','normal');
	    }
	});
	$('#teb_italic').click(function(){
	    $('#teb_italic').toggleClass('teb_italic_active');
	    if($('#teb_italic').hasClass('teb_italic_active')){
		$('#te_caption').css('font-style','italic');
	    }else{
		$('#te_caption').css('font-style','normal');
	    }
	});
	$('#te_caption').focusin(function(){
	    if($('#te_caption').val()=='Type your text here'){
		$('#te_caption').val('');
	    }
	});
	$('#te_caption').focusout(function(){
	    if($('#te_caption').val()==''){
		$('#te_caption').val('Type your text here');
	    }
	});
	$('#te_caption').css('font-family',$('#te_title_font_family').val());
	$('#te_caption').css('font-size',$('#teb_font_size').val()+'px');
	$('#te_title_font_family').change(function(){
	    $('#te_caption').css('font-family',$('#te_title_font_family').val());
	});
	$('#teb_font_size').change(function(){
	    //$('#te_caption').css('font-size',$('#teb_font_size').val()+'px');
	});
	$('#teb_up').click(function(){
	    $('#teb_font_size').val(parseInt($('#teb_font_size').val())+1);
	    $('#teb_font_size').change();
	});
	$('#teb_down').click(function(){
	    if($('#teb_font_size').val()>8){
		$('#teb_font_size').val(parseInt($('#teb_font_size').val())-1);
		$('#teb_font_size').change();
	    }
	});

	//Function to convert hex format to a rgb color
	function rgb2hex(r,g, b){
	    return "#" +
	    ("0" + parseInt(r,10).toString(16)).slice(-2) +
	    ("0" + parseInt(g,10).toString(16)).slice(-2) +
	    ("0" + parseInt(b,10).toString(16)).slice(-2);
	}

	$('#te_caption_submit').click(function(){

	    var captionColor = $('#colorSelector2 div').css('background-color');
	    captionColor = captionColor.substring(captionColor.indexOf('rgb(')+4,captionColor.length);
	    captionColor = captionColor.substring(0,captionColor.indexOf(')'));
	    captionColor = captionColor.split(',');
	    captionColor = rgb2hex(captionColor[0], captionColor[1], captionColor[2]);

	    var captionFont = $('#te_title_font_family').val();

	    var captionText = $('#te_caption').val();

	    var captionBold = 0;
	    if($('#teb_bold').hasClass('teb_bold_active')){
		captionBold = 1;
	    }

	    var captionItalic = 0;
	    if($('#teb_italic').hasClass('teb_italic_active')){
		captionItalic = 1;
	    }

	    var captionSize = $('#teb_font_size').val();

	    var backgroundColor = $('#backgroundColor').val();

	    defaultSettings =
		'<caption>'+
			'<text>' + captionText + '</text>' +
			'<font-bold>' + captionBold + '</font-bold>' +
			'<font-italic>' + captionItalic + '</font-italic>' +
			'<font-size>' + captionSize + '</font-size>' +
			'<font-family>' + captionFont + '</font-family>' +
			'<font-color>' + captionColor + '</font-color>' +
			'<background-color>'+backgroundColor+'</background-color>'+
		'</caption>';

	    alert(defaultSettings);
	});

    });
</script>
{/literal}

